<template>
  <div class="box">
    <Breadcrumb name1="订单管理" name2="营收统计"></Breadcrumb>
    <el-card>
      <div class="graph">
        <div class="left">
          <h2>收入分布</h2>
          <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
        </div>
        <div class="right">
          <h2>增长情况</h2>
          <div id="myChart1" :style="{ width: '800px', height: '400px' }"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderList } from '@/api/index'
import Breadcrumb from '@/components/breadcrumb'
export default {
  name: 'hello',
  data() {
    return {
      msg: 'fafa',
      orderlist: [],
      pc: 0,
      phone: 0,
      peijian: 0,
      game: 0,
      time: [],
      sum: [],
      date: [],
    }
  },
  components: {
    Breadcrumb,
  },
  created() {
    getOrderList({ page: 1, limit: 10000 }).then((res) => {
      // console.log(res.data.data);
      this.orderlist = res.data.data
      this.orderlist.forEach((item) => {
        var index = this.time.findIndex((add) => {
          return add.time == this.orderDate(item.datetime)
        })
        if (index == -1) {
          this.time.push({
            time: this.orderDate(item.datetime),
            sum: parseInt(item.sum),
          })
        } else {
          this.time[index].sum += parseInt(item.sum)
        }
        // console.log(1111111);
        // console.log(JSON.parse(item.goods));
        JSON.parse(item.goods).forEach((item) => {
          if (item.gid == '1') {
            this.phone += parseInt(item.price) * parseInt(item.count)
          } else if (item.gid == '2') {
            this.pc += parseInt(item.price) * parseInt(item.count)
          } else if (item.gid == '3') {
            this.peijian += parseInt(item.price) * parseInt(item.count)
          } else {
            this.game += parseInt(item.price) * parseInt(item.count)
          }
        })
      })
      this.date = []
      this.sum = []
      this.time.forEach((item) => {
        this.sum.unshift(item.sum)
        this.date.unshift(item.time)
      })
      console.log(this.sum)
      console.log(this.date)
      console.log(this.time)

      this.drawLine()
      this.drawLine1()
    })
  },
  mounted() {
    this.drawLine()
    this.drawLine1()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: '穗穗网',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.phone, name: '手机' },
              { value: this.pc, name: '电脑' },
              { value: this.peijian, name: '配件' },
              { value: this.game, name: '掌机' },
            ],
          },
        ],
      })
    },
    drawLine1() {
      let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      myChart1.setOption({
        xAxis: {
          type: 'category',
          data: this.date,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.sum,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      })
    },
    orderDate(value) {
      if (value) {
        let date = new Date(value / 1)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        return year + '-' + month + '-' + day
      }
    },
  },
}
</script>
<style lang="scss" scoped>
h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.graph {
  width: 100%;
  display: flex;
}
</style>
